<template>
  <a-modal
    width="60%"
    v-model:visible="visible"
    title="选择转发群"
    @before-ok="onOk"
    unmount-on-close
  >
    <div class="box-full flex-col bgfff box-border overflow-hidden">
      <div class="flex flex-a-c flex-j-b w-full mb-20">
        <a-input-search allow-clear placeholder="输入群名称检索" v-model="searchValue" />
      </div>
      <div class="w-full flex-1 m-relative">
        <a-table
          v-model:columns="columns"
          v-model:selectedKeys="selectedKeys"
          :data="tableData"
          :show-header="false"
          row-key="wxid"
          :bordered="false"
          :loading="loading"
          :pagination="false"
          :scroll="{ y: 400 }"
          :row-selection="{ type: 'checkbox', showCheckedAll: true }"
        >
          <template #groupInfo="{ record }">
            <div class="flex flex-a-c">
              <a-image
                width="42"
                height="42"
                class="mx-4"
                :preview="false"
                style="border-radius: 4px"
                :src="record.avatar"
              />
              <span class="ml-6">{{ record.nickname }}</span>
            </div>
          </template>
        </a-table>
      </div>
    </div>
  </a-modal>
</template>
<script setup>
const props = defineProps(['personalGroupList'])
const emit = defineEmits(['afterChooseGroup'])
const loading = ref(false)
const visible = ref(false)
const searchValue = ref()
const selectedKeys = ref([])
const columns = [
  {
    title: '群信息',
    slotName: 'groupInfo'
  }
]

const openGroupModal = () => {
  selectedKeys.value = []
  visible.value = true
}

const tableData = computed(() => {
  if (searchValue.value) {
    return props.personalGroupList.filter((item) => item.nickname.includes(searchValue.value))
  } else {
    return props.personalGroupList.slice() // 使用 slice() 创建 tableDataO 的浅拷贝
  }
})

const onOk = () => {
  if (!selectedKeys.value.length) {
    Message.warning('请选择要转发的群')
    return false
  }
  emit('afterChooseGroup', selectedKeys.value)
  return true
}

defineExpose({ openGroupModal })
</script>
<style scoped>
.introduce {
  max-width: 300px;
}
.custom-radio-card {
  border: 1px solid var(--color-border-2);
  border-radius: 2px;
  white-space: nowrap;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
}

.custom-radio-card-mask {
  height: 12px;
  width: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 100%;
  border: 1px solid var(--color-border-2);
  box-sizing: border-box;
}

.custom-radio-card-mask-dot {
  width: 8px;
  height: 8px;
  border-radius: 100%;
}

.custom-radio-card-title {
  color: var(--color-text-1);
  font-size: 12px;
}

.custom-radio-card:hover,
.custom-radio-card-checked,
.custom-radio-card:hover .custom-radio-card-mask,
.custom-radio-card-checked .custom-radio-card-mask {
  border-color: rgb(var(--primary-6));
}

.custom-radio-card-checked {
  background-color: var(--color-primary-light-1);
}

.custom-radio-card:hover .custom-radio-card-title,
.custom-radio-card-checked .custom-radio-card-title {
  color: rgb(var(--primary-6));
}

.custom-radio-card-checked .custom-radio-card-mask-dot {
  background-color: rgb(var(--primary-6));
}
</style>
